import React, { useState } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import style from './Index.module.less'
import { PrimaryButton, ViceButton } from '@components/XButton'
import AddModal from './components/AddModal'
import ModifyModal from './components/ModifyModal'

// 渲染人员列表
function renderList (list = [], type, forzen, setModifyData, setModifyVisible) {
  const Btn = type === '申请人' ? PrimaryButton : ViceButton
  if (list.length === 0 && forzen) {
    return <span className={style.empty}>无</span>
  }
  return list.map((li, i) => {
    const disable = li.status === 0
    const s = classnames({ [style['text-disabled']]: disable })
    const ClickHandle = () => {
      if (forzen) {
        return false
      }
      setModifyData(li)
      setModifyVisible(true)
    }
    return (
      <Btn key={li.id} onClick={ClickHandle}>
        <span className={s}>{li.name}</span>
        {disable ? <span>（终结）</span> : null}
        {!li.license ? (
          <span className={style['warning-icon']}><ExclamationCircleOutlined /></span>
        ) : null}
      </Btn>
    )
  })
}

function Main ({ value, type, onChange, caseFormRef, forzen }) {
  const Btn = type === '申请人' ? PrimaryButton : ViceButton
  const [addVisible, setAddVisible] = useState(false)
  const [modifyVisible, setModifyVisible] = useState(false)
  const [modifyData, setModifyData] = useState(null)
  return (
    <div className={style.container}>
      {renderList(value, type, forzen, setModifyData, setModifyVisible)}
      {!forzen && <Btn type='dashed' onClick={() => setAddVisible(true)}>+添加</Btn>}
      <AddModal type={type} visible={addVisible} hide={() => setAddVisible(false)} value={value} onChange={onChange} />
      <ModifyModal caseFormRef={caseFormRef} type={type} visible={modifyVisible} initialValues={modifyData} hide={() => setModifyVisible(false)} value={value} onChange={onChange} />
    </div>
  )
}

Main.propTypes = {
  value: PropTypes.array,
  type: PropTypes.string,
  onChange: PropTypes.func,
  caseFormRef: PropTypes.object,
  forzen: PropTypes.bool
}

Main.defaultProps = {
  value: [],
  type: '',
  onChange: () => {},
  caseFormRef: null,
  forzen: false
}

export default Main
